<template>
  <div>
    <h4>测试$router push方法和replace方法后浏览器回退的不同效果</h4>
    <ul>
      <li v-for="msg in messages" :key="msg.id">
        <router-link :to="`/home/message/detail/${msg.id}`">{{ msg.title }}</router-link>
        <button @click="pushShow(msg.id)">$router的push方法</button>
        <button @click="replaceShow(msg.id)">$router.replace</button>
      </li>
      <hr/>
      <button @click="$router.back()">后退</button>
    </ul>
    <hr/>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "Message",
  data() {
    return {
      messages: []
    }
  },
  methods:{
    pushShow(id){
       this.$router.push(`/home/message/detail/${id}`);
    },
    replaceShow(id){
      this.$router.replace(`/home/message/detail/${id}`);
    }
  },

  mounted() {
    setTimeout(() => {
      const messages = [{id: 1, title: 'Message001'},
        {id: 3, title: 'Message003'},
        {id: 5, title: 'Message005'}];
      this.messages = messages;
    }, 1000)
  }
}
</script>

<style scoped>

</style>
